차트 컴포넌트 Lazy Loading 및 성능 최적화 리팩토링 by Copilot · Pull Request #341 · allcll/allcll-frontend

Copilot · 2026-03-20T13:38:52Z

개요

ALLCLL 서비스 내 차트 컴포넌트들의 성능을 최적화하고, 프로젝트 아키텍처를 견고하게 개선하기 위한 리팩토링입니다. @allcll/charts 패키지를 독립적으로 고도화하고, 각 애플리케이션의 번들 최적화를 수행했습니다.

🚀 배경

현재 ALLCLL에서 차트(chart.js)는 다음과 같은 문제가 있었습니다.

📦 차트 라이브러리(chart.js, react-chartjs-2)가 번들에 포함되어 초기 로딩이 무거움
🔁 여러 페이지에서 동일 라이브러리를 중복 로딩
⚙️ 차트 사용할 때마다 Suspense 설정 필요 (개발 불편)

🚀 주요 변경 사항

1. @allcll/charts 패키지 분리

charts 라이브러리를 패키지로 분리
내부 Lazy/Suspense 적용: 차트 컴포넌트에 React.lazy와 Suspense를 내장했습니다.

2. 코드 스플리팅 - 번들 최적화 (Manual Chunks)

admin 및 client 패키지의 vite.config.ts에 manualChunks 설정을 추가
chart.js와 react-chartjs-2를 vendor-chartjs 청크로 강제 분리하여, 페이지 간 중복 로딩을 줄이고 캐싱 효율을 극대화
- 한 번 로딩하면 다른 곳에서 재사용 할 수 있음.

3. 이미지 크기 최적화 (레이아웃 이동 방지)

packages/client/src/widgets/home/ui/MainBanner.tsx: spring-banner-min.png 이미지에 width={740} height={788} 속성 추가 (CLS 방지)
- 실제 이미지 크기 740×788px 기반
- 브라우저가 이미지 로드 전 aspect-ratio(740:788)를 계산하여 공간 미리 확보
- CSS width(w-[320px] lg:w-[370px])는 유지, height는 브라우저가 aspect-ratio로 자동 계산
packages/client/src/shared/ui/Image.tsx: width/height는 이미 React.ImgHTMLAttributes로 지원됨 (변경 불필요)

4. (참고) index.html 탭 변경

lint 로 인해 탭 개수가 변경되었습니다. 리뷰하실 때 참고하시면 좋을 것 같습니다.

⚙️ 아키텍처 개선 효과

개발 편의성: Suspense 설정 없이 컴포넌트만 사용해도 자동으로 성능 최적화가 적용됩니다.
성능: 번들 분리를 통한 메인 스레드 부담 완화 및 공통 라이브러리 캐싱 최적화.
결합도 완화: client 패키지가 외부 라이브러리 타입에 직접 의존하지 않게 되어, 향후 라이브러리 교체 시 영향 범위가 대폭 줄어들었습니다.

인프라 변화

http 1.1 -> http 2.0 으로 변경 (파일이 여러개 인 경우 성능 향상)

Original prompt

react chart 2 와, chart js 가 너무 무거워서, 이걸 우리가 필요한 것 만 따로 라이브러리 화 하려고 해. 최종적인 목표는 chart library 를 우리것으로 만들고, 최종 번들의 크기를 최적화 하는게 목표야.
먼저 client package 에서 react chart 2와 chart js 중에 어떤 기능을 쓰고 있는지 알아봐주고 먼저 그걸 정리해줘.
그 뒤에 사용하는 차트 항목이 모두 구현되도록 라이브러리화 해주고, 그걸 현재 사용하고 있는 react chart 2 나 chart js 부분을 대체해주면 돼.
최종적으로 확인했을 때 react-chart-2 나 chart-js 가 없어져야 하고, 빌드했을 때 오류가 나지 않아야 해.

최종적으로 PR을 생성하면, 설명은 한국어로 써줘.

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com>

github-actions · 2026-03-21T03:43:08Z

🚀 Preview Deployment

Client: https://dev.allcll.kr/pr-341/
Admin: https://dev-admin.allcll.kr/pr-341/

This preview is automatically updated on each push.

… comparison Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/10d1c785-dec8-4385-93f9-2227e6cbe889

…dle size comparison" This reverts commit 78ba46e.

…rison POC Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/2be2daf4-40d0-405f-9fd3-1f36f9bb3f38

…ze comparison POC" This reverts commit f2989ae.

…adability Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/6aa13c00-bb5a-4ed4-8267-9a6ca54dcac9

…ayout fixes Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/50c3a544-1335-4bef-b126-dce519f5a67d

…arChart overflow fix Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/2ca75e12-45e8-44e0-be77-5fc7ab1b74a4

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/20284ed7-8e56-426d-bbbc-c6c38a4b964e

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/e8b26908-1370-4f5d-95ce-6f498962e2c8

…into copilot/optimize-chart-library

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/f93d8048-62da-44cf-bac4-e4c2eafb1aa8

…into copilot/optimize-chart-library

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/44e3eec1-109d-4ce7-b62b-66a6c2a0107f

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/7423d3a9-9dfe-4d78-b5ea-143b3d2d7860

sonarqubecloud · 2026-04-14T05:30:31Z

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 59b7c3fd1c

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-04-14T06:00:39Z

+function MixedChart({ data, options }: MixedChartProps) {
+  return <Chart type="bar" data={data} options={options} />;


Forward sizing props to loaded MixedChart

StatisticsChart now passes height={288}, but this wrapper drops that prop when the lazy chunk resolves because MixedChart only accepts { data, options } and renders <Chart> without forwarding sizing props. This means the fallback skeleton honors the height while the real chart does not, causing avoidable layout shift and inconsistent chart sizing after load.

Useful? React with 👍 / 👎.

Initial plan

6335ed4

Copilot AI assigned Copilot and hyunwoo0081 Mar 20, 2026

Copilot started work on behalf of hyunwoo0081 March 20, 2026 13:38 View session

feat: replace react-chartjs-2/chart.js with custom @allcll/chart library

b5ba8d3

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Chart library 최적화 및 통합 구현~~ chore: replace react-chartjs-2/chart.js with lightweight custom SVG chart library Mar 20, 2026

Copilot AI requested a review from hyunwoo0081 March 20, 2026 13:53

Copilot finished work on behalf of hyunwoo0081 March 20, 2026 13:53

Copilot started work on behalf of hyunwoo0081 March 21, 2026 08:07 View session

feat: add POC for uplot-react vs visx vs custom SVG chart bundle size…

78ba46e

… comparison Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/10d1c785-dec8-4385-93f9-2227e6cbe889

Copilot AI changed the title ~~chore: replace react-chartjs-2/chart.js with lightweight custom SVG chart library~~ feat: chart.js/react-chartjs-2 제거 + 커스텀 SVG 차트 라이브러리 도입 + uplot/visx 번들 크기 POC Mar 21, 2026

Copilot finished work on behalf of hyunwoo0081 March 21, 2026 08:21

Copilot started work on behalf of hyunwoo0081 March 21, 2026 09:31 View session

Copilot AI and others added 2 commits March 21, 2026 09:36

Revert "feat: add POC for uplot-react vs visx vs custom SVG chart bun…

392285b

…dle size comparison" This reverts commit 78ba46e.

feat: replace @allcll/chart with visx in client for bundle size compa…

f2989ae

…rison POC Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/2be2daf4-40d0-405f-9fd3-1f36f9bb3f38

Copilot AI changed the title ~~feat: chart.js/react-chartjs-2 제거 + 커스텀 SVG 차트 라이브러리 도입 + uplot/visx 번들 크기 POC~~ feat: replace @allcll/chart with visx in client — bundle size POC Mar 21, 2026

Copilot finished work on behalf of hyunwoo0081 March 21, 2026 09:47

Copilot started work on behalf of hyunwoo0081 March 21, 2026 11:24 View session

Copilot AI and others added 2 commits March 21, 2026 11:25

Revert "feat: replace @allcll/chart with visx in client for bundle si…

6836bf0

…ze comparison POC" This reverts commit f2989ae.

refactor: optimize @allcll/chart for bundle size, performance, and re…

86f9211

…adability Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/6aa13c00-bb5a-4ed4-8267-9a6ca54dcac9

Copilot AI changed the title ~~feat: replace @allcll/chart with visx in client — bundle size POC~~ refactor(@allcll/chart): extract shared internals, memoize SVG computations, improve maintainability Mar 21, 2026

Copilot finished work on behalf of hyunwoo0081 March 21, 2026 11:39

Copilot started work on behalf of hyunwoo0081 March 21, 2026 14:34 View session

feat(@allcll/chart): entry animations, dark tooltip, legend toggle, l…

718e5ae

…ayout fixes Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/50c3a544-1335-4bef-b126-dce519f5a67d

Copilot AI changed the title ~~refactor(@allcll/chart): extract shared internals, memoize SVG computations, improve maintainability~~ feat(@allcll/chart): entry animations, dark tooltip, legend toggle, RadarChart overflow & MixedChart layout fixes Mar 21, 2026

Copilot finished work on behalf of hyunwoo0081 March 21, 2026 14:48

Copilot started work on behalf of hyunwoo0081 March 22, 2026 22:45 View session

feat(@allcll/chart): value-based animations (sweep/grow/rise) and Rad…

c5d346f

…arChart overflow fix Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/2ca75e12-45e8-44e0-be77-5fc7ab1b74a4

Copilot AI changed the title ~~feat(@allcll/chart): entry animations, dark tooltip, legend toggle, RadarChart overflow & MixedChart layout fixes~~ feat(@allcll/chart): value-based entry/update animations + RadarChart overflow fix Mar 22, 2026

Copilot finished work on behalf of hyunwoo0081 March 23, 2026 22:26

Copilot started work on behalf of hyunwoo0081 March 24, 2026 02:52 View session

refactor(chart): code quality and accessibility improvements

e054b7c

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/20284ed7-8e56-426d-bbbc-c6c38a4b964e

Copilot AI changed the title ~~fix(DoughnutChart): value-based chart animations and full-circle arc rendering bug~~ refactor(chart): accessibility, stable keys, and depth reduction Mar 24, 2026

Copilot finished work on behalf of hyunwoo0081 March 24, 2026 03:08

Copilot started work on behalf of hyunwoo0081 March 25, 2026 13:42 View session

Copilot AI and others added 2 commits March 25, 2026 13:56

feat: visx 차트 라이브러리 + 코드 스플리팅 + Suspense fallback 구현

197b2c9

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/e8b26908-1370-4f5d-95ce-6f498962e2c8

Merge remote-tracking branch 'origin/copilot/optimize-chart-library' …

44b0a70

…into copilot/optimize-chart-library

Copilot finished work on behalf of hyunwoo0081 March 25, 2026 14:01

Copilot started work on behalf of hyunwoo0081 March 25, 2026 14:16 View session

Copilot AI and others added 2 commits March 25, 2026 14:29

feat: chart.js 코드 스플리팅 + Suspense fallback + manualChunks 설정

fa40264

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/f93d8048-62da-44cf-bac4-e4c2eafb1aa8

Merge remote-tracking branch 'origin/copilot/optimize-chart-library' …

bcb9978

…into copilot/optimize-chart-library

Copilot finished work on behalf of hyunwoo0081 March 25, 2026 14:31

Copilot started work on behalf of hyunwoo0081 March 25, 2026 14:44 View session

feat: @allcll/charts 패키지 생성 및 클라이언트 lazy 임포트 업데이트

3feae00

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/44e3eec1-109d-4ce7-b62b-66a6c2a0107f

Copilot stopped work on behalf of hyunwoo0081 due to an error March 25, 2026 15:43
Copilot had to stop work due to a timeout.

hyunwoo0081 added 2 commits March 26, 2026 07:27

chore: fix pnpm-lock

1f68876

chore: delete img.png

df942fc

Copilot started work on behalf of hyunwoo0081 March 25, 2026 22:37 View session

fix: 메인 배너 이미지 width/height 속성 추가로 CLS 방지

39f5ac7

Co-authored-by: hyunwoo0081 <76638365+hyunwoo0081@users.noreply.github.com> Agent-Logs-Url: https://github.com/allcll/allcll-frontend/sessions/7423d3a9-9dfe-4d78-b5ea-143b3d2d7860

Copilot finished work on behalf of hyunwoo0081 March 25, 2026 22:40

hyunwoo0081 added 2 commits April 14, 2026 13:57

chore: 폴더 정리 및 lazy 컴포넌트로 수정

87c1da7

fix: 빌드 오류 수정

59b7c3f

hyunwoo0081 changed the title ~~refactor(chart): accessibility, stable keys, and depth reduction~~ 차트 컴포넌트 Lazy Loading 및 성능 최적화 리팩토링 Apr 14, 2026

hyunwoo0081 approved these changes Apr 14, 2026

View reviewed changes

hyunwoo0081 marked this pull request as ready for review April 14, 2026 05:53

chatgpt-codex-connector bot reviewed Apr 14, 2026

View reviewed changes

hyunwoo0081 requested review from INSANE-P and Songhyejeong April 17, 2026 11:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

차트 컴포넌트 Lazy Loading 및 성능 최적화 리팩토링#341

차트 컴포넌트 Lazy Loading 및 성능 최적화 리팩토링#341
Copilot wants to merge 21 commits intodevelopfrom
copilot/optimize-chart-library

Copilot AI commented Mar 20, 2026 •

edited by hyunwoo0081

Loading

Uh oh!

github-actions bot commented Mar 21, 2026 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Apr 14, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

chatgpt-codex-connector bot Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		function MixedChart({ data, options }: MixedChartProps) {
		return <Chart type="bar" data={data} options={options} />;

Conversation

Copilot AI commented Mar 20, 2026 • edited by hyunwoo0081 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

개요

🚀 배경

🚀 주요 변경 사항

1. @allcll/charts 패키지 분리

2. 코드 스플리팅 - 번들 최적화 (Manual Chunks)

3. 이미지 크기 최적화 (레이아웃 이동 방지)

4. (참고) index.html 탭 변경

⚙️ 아키텍처 개선 효과

인프라 변화

Uh oh!

github-actions bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Preview Deployment

Uh oh!

sonarqubecloud bot commented Apr 14, 2026

Quality Gate failed

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Mar 20, 2026 •

edited by hyunwoo0081

Loading

github-actions bot commented Mar 21, 2026 •

edited

Loading